import {todoStore} from "./store/todo.Store";
import {observer} from "mobx-react-lite";
import Footer from './Footer';
import Header from './Header';
import List from './List'
import '../../app.scss'


const AppMobx = () => {
    return (
        <div className='todo-container'>
            <div className='todo-wrap'>
                <Header addTodo={todoStore.addTodo}/>
                <List todos={todoStore.todos} updateTodo={todoStore.updateTodo} deleteTodo={todoStore.deleteTodo}/>
                <Footer todos={todoStore.todos} clearAllDone={todoStore.clearAllDone}
                        updateAllTodoDone={todoStore.updateAllTodoDone}/>
            </div>
        </div>
    )
}

export default observer(AppMobx)
